<template>
  <div class="ele-addshop">
    <div class="navbar">
      <div class="topbar">
        <div class="title">围老商户后台管理系统</div>
        <div v-if="loginUser" class="infos">
          <el-image
            style="width: 40px; height: 40px; border-radius: 50%; margin-right: 15px;"
            :src="require('@/assets/images/avatar.jpg')"
            fit="cover"
          />
          <div class="account">{{ loginUser }}</div>
          <el-button style="margin-left: 10px;" type="primary" icon="el-icon-switch-button" @click="logout">退出</el-button>
        </div>
      </div>
    </div>
    <div class="page-body">
      <div class="shop-title"><span>店铺基本信息</span></div>
      <el-form ref="shopForm" :model="formData" class="ele-form" :rules="rules" label-position="right" label-width="200px">
        <el-form-item prop="admin" label="店铺管理员:">
          <el-col
            :span="5"
          ><el-input
            v-model="formData.admin"
            :disabled="isDetail"
            placeholder="请输入"
          /></el-col>
        </el-form-item>
        <el-form-item prop="phone" label="联系方式:">
          <el-col
            :span="5"
          ><el-input
            v-model="formData.phone"
            :disabled="isDetail"
            placeholder="请输入"
          /></el-col>
        </el-form-item>
        <el-form-item prop="verCode" label="验证码:">
          <el-col :span="5">
            <el-input v-model="formData.verCode" placeholder="请输入" />
          </el-col>
          <el-col :span="1" :offset="1">
            <el-button v-show="show" type="primary" @click="getVerCodeByMessage">获取验证码</el-button>
            <el-button v-show="!show">{{ count }}秒后可以重发</el-button>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="10">
            <el-alert :closable="false">
              <el-row type="flex">
                <el-col :span="12"><span>未收到验证码？</span></el-col>
                <el-col :span="18"><el-link type="primary" :underline="false" @click="getVerCodeByVoice">点击使用语音验证码</el-link></el-col>
              </el-row>
            </el-alert>
          </el-col>
        </el-form-item>
        <el-form-item prop="Eshop" label="店铺类型:">
          <el-col :span="5">
            <el-select v-model="formData.eshop" :disabled="isDetail" class="ele-select-eshop">
              <el-option label="企业店铺" value="0" />
              <el-option label="个人店铺" value="1" />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item prop="shopName" label="店铺名称:">
          <el-col
            :span="5"
          ><el-input
            v-model="formData.shopName"
            :disabled="isDetail"
            placeholder="请输入"
          /></el-col>
        </el-form-item>
        <el-form-item prop="address" label="地址:" style="padding-left: -20px">
          <el-col :span="10" class="ele-select-address" style="margin-left: 0">
            <city-select ref="citySelect" v-model="formData.address" style="margin-left: 0" @change="changedAddress" />
          </el-col>
          <el-col :span="6" class="ele-select-address">
            <el-input v-model="formData.address.addressDetail" :disabled="isDetail" placeholder="详细地址" />
          </el-col>
        </el-form-item>
        <!-- 企业 -->
        <div v-if="formData.eshop === '0'" class="add-Eshop">
          <el-form-item label="公司名称:" prop="gname">
            <el-col
              :span="6"
            ><el-input
              v-model="formData.gname"
              :disabled="isDetail"
              placeholder="输入与营业执照一支的公司名"
            /></el-col>
          </el-form-item>
          <el-form-item prop="sid" label="纳税人识别号:">
            <el-col
              :span="6"
            ><el-input
              v-model="formData.sid"
              :disabled="isDetail"
              placeholder="输入与营业执照一致的纳税人识别号"
            /></el-col>
          </el-form-item>
          <el-form-item prop="SFid" label="法人身份证号:">
            <el-col
              :span="6"
            ><el-input
              v-model="formData.SFid"
              :disabled="isDetail"
              placeholder="输入与营业执照一致的法人身份证号"
            /></el-col>
          </el-form-item>
          <el-form-item prop="yyzz" label="营业执照:">
            <el-col :span="10">
              <el-upload
                class="ele-col-upload"
                :action="uploadPath"
                :disabled="isDetail"
                list-type="picture-card"
                accept=".jpg, .png"
                :data="{path:path,fileType: 0}"
                :before-upload="beforeAvatarUpload"
                :on-success="uploadyyzzUrl"
                :limit="limitCount"
                :on-change="isOverLimityyzz"
                :on-remove="isRemoveLimityyzz"
                :class="{hide:hideUploadyyzz}"
                :file-list="formData.yyzz"
              >
                <div slot="tip" class="ele-tip">添加营业执照</div>
                <!--                <img
                  v-if="formData.yyzz"
                  class="el-upload-list__item-thumbnail"
                  :src="formData.yyzz"
                  alt=""
                >-->
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              <p class="ele-introduce">
                请上传jpg或png格式图片，大小不超过5M
              </p>
            </el-col>
          </el-form-item>
          <!--        <el-form-item v-if="id" prop="YLQXBA" label="医疗器械备案许可证:">
            <el-col :span="10">
              <el-image :src="baseUrl+formData.ylqxba">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <el-upload
                :action="uploadPath"
                list-type="picture-card"
                class="upload-demo"
                accept=".jpg, .png"
                :data="{path:path,fileType: 1}"
                :before-upload="beforeAvatarUpload"
                :on-success="uploadylqxUrl"
                :limit="limitCount"
                :on-change="isOverLimitylqxba"
                :on-remove="isOverLimitylqxba"
                :class="{hide:hideUploadylqxba}"
              >
                <div slot="tip" class="ele-tip">医疗器械备案许可证</div>
                <img
                  v-if="formData.ylqxba"
                  class="el-upload-list__item-thumbnail"
                  :src="formData.ylqxba"
                  alt=""
                >
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              <p class="ele-introduce">
                请上传jpg或png格式图片，大小不超过5M
              </p>
            </el-col>
          </el-form-item>-->
          <el-form-item prop="ylqxba" label="医疗器械备案许可证:">
            <el-col :span="10">
              <el-upload
                class="ele-col-upload"
                :action="uploadPath"
                :disabled="isDetail"
                list-type="picture-card"
                accept=".jpg, .png"
                :data="{path:path,fileType: 1}"
                :before-upload="beforeAvatarUpload"
                :on-success="uploadylqxUrl"
                :limit="limitCount"
                :on-change="isOverLimitylqxba"
                :on-remove="isRemoveLimitylqxba"
                :class="{hide:hideUploadylqxba}"
                :file-list="formData.ylqxba"
              >
                <div slot="tip" class="ele-tip">医疗器械备案许可证</div>
                <i class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
              <p class="ele-introduce">
                请上传jpg或png格式图片，大小不超过5M
              </p>
            </el-col>
          </el-form-item>
          <el-form-item prop="FDSFid" label="法人身份证:">
            <el-col :span="15" class="el-upload-1">
              <div class="picture-card-item-1">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  :disabled="isDetail"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 2}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadfontfrsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitFrFont"
                  :on-remove="isRemoveLimitFrFont"
                  :class="{hide:hideUploadFrFont}"
                  :file-list="formData.frSFImage.font"
                >
                  <div slot="tip" class="ele-tip">身份证正面</div>
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <p class="ele-introduce">
                  请上传jpg或png格式图片，大小不超过5M
                </p>
              </div>

              <div class="picture-card-item-2">
                <el-upload
                  class="ele-col-upload"
                  :action="uploadPath"
                  :disabled="isDetail"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 3}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadbackfrsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitFrBack"
                  :on-remove="isRemoveLimitFrBack"
                  :class="{hide:hideUploadFrBack}"
                  :file-list="formData.frSFImage.back"
                >
                  <div slot="tip" class="ele-tip">身份证反面</div>
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </el-col>
          </el-form-item>
          <!--          <div v-if="id" class="audit-off">
            <el-form-item prop="YYZZ" label="营业执照:">
              <el-col :span="5" class="ele-col-item">
                <el-image :src="baseUrl+formData.yyzz" :class="{hide:hideUploadyyzz}">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-upload
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  class="upload-demo"
                  :data="{path:path,fileType: 0}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadyyzzUrl"
                  :limit="limitCount"
                  :on-change="isOverLimityyzz"
                  :on-remove="isOverLimityyzz"
                  :class="{hide:hideUploadyyzz}"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
                <el-alert
                  title="请上传jpg或png格式图片，大小不超过5M"
                  type="info"
                  :closable="false"
                />
              </el-col>
            </el-form-item>
            <el-form-item prop="YLQXBA" label="医疗器械许可证:">
              <el-col :span="5" class="ele-col-item">
                <el-image :src="baseUrl+formData.ylqxba" :class="{hide:hideUploadylqxba}">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-upload
                  :action="uploadPath"
                  list-type="picture-card"
                  class="upload-demo"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 1}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadylqxUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitylqxba"
                  :on-remove="isOverLimitylqxba"
                  :class="{hide:hideUploadylqxba}"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
                <el-alert
                  title="请上传jpg或png格式图片，大小不超过5M"
                  type="info"
                  :closable="false"
                />
              </el-col>
            </el-form-item>
            <el-form-item prop="FDSFid" label="法人身份证:">
              <el-col :span="5" class="ele-col-item">
                <el-image :src="baseUrl+formData.frSFImage.font" :class="{hide:hideUploadFrFont}">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-upload
                  :action="uploadPath"
                  list-type="picture-card"
                  class="upload-demo"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 2}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadfontfrsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitFrFont"
                  :on-remove="isOverLimitFrFont"
                  :class="{hide:hideUploadFrFont}"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
                <el-alert
                  title="请上传jpg或png格式图片，大小不超过5M"
                  type="info"
                  :closable="false"
                />
              </el-col>
              <el-col :span="5" :offset="1" class="ele-col-item">
                <el-image :src="baseUrl+formData.frSFImage.back" :class="{hide:hideUploadFrBack}">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-upload
                  :action="uploadPath"
                  list-type="picture-card"
                  class="upload-demo"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 3}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadbackfrsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitFrBack"
                  :on-remove="isOverLimitFrBack"
                  :class="{hide:hideUploadFrBack}"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
              </el-col>
            </el-form-item>
          </div>-->
        </div>
        <!-- 个人 -->
        <div v-if="formData.eshop === '1'" class="add-Ushop">
          <!--        <el-form-item v-if="!id" prop="SFid" label="身份证号:">
            <el-col
              :span="5"
            ><el-input
              v-model="formData.SFid"
              placeholder="输入身份证号码"
            /></el-col>
          </el-form-item>-->
          <el-form-item prop="sfid" label="身份证号:">
            <el-col
              :span="6"
            ><el-input
              v-model="formData.sfid"
              :disabled="isDetail"
              placeholder="输入身份证号码"
            /></el-col>
          </el-form-item>
          <!--          <div v-if="id" class="audit-off">
            <el-form-item label="身份证:">
              <el-col :span="5" class="ele-col-item">
                <el-image :src="baseUrl+formData.sfImage.font" :class="{hide:hideUploadSfFont}">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-upload
                  :action="uploadPath"
                  list-type="picture-card"
                  class="upload-demo"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 4}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadfontsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitSfFont"
                  :on-remove="isOverLimitSfFont"
                  :class="{hide:hideUploadSfFont}"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
                <el-alert
                  title="请上传jpg或png格式图片，大小不超过5M"
                  type="info"
                  :closable="false"
                />
              </el-col>
              <el-col :span="5" :offset="1" class="ele-col-item">
                <el-image :src="baseUrl+formData.sfImage.back" :class="{hide:hideUploadSfBack}">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline" />
                  </div>
                </el-image>
                <el-upload
                  :action="uploadPath"
                  list-type="picture-card"
                  class="upload-demo"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 5}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadbacksfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitSfBack"
                  :on-remove="isOverLimitSfBack"
                  :class="{hide:hideUploadSfBack}"
                >
                  <el-button class="up-btn-load">重新上传</el-button>
                </el-upload>
              </el-col>
            </el-form-item>
          </div>-->

          <el-form-item prop="SFImage" label="身份证:">
            <el-col :span="15" class="el-upload-1">
              <div class="picture-card-item-1">
                <el-upload
                  :action="uploadPath"
                  :disabled="isDetail"
                  list-type="picture-card"
                  class="ele-col-upload"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 4}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadfontsfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitSfFont"
                  :on-remove="isRemoveLimitSfFont"
                  :class="{hide:hideUploadSfFont}"
                  :file-list="formData.sfImage.font"
                >
                  <div slot="tip" class="ele-tip">身份证正面</div>
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <p class="ele-introduce">
                  请上传jpg或png格式图片，大小不超过5M
                </p>
              </div>

              <div class="picture-card-item-2">
                <el-upload
                  class="ele-col-upload"
                  :disabled="isDetail"
                  :action="uploadPath"
                  list-type="picture-card"
                  accept=".jpg, .png"
                  :data="{path:path,fileType: 5}"
                  :before-upload="beforeAvatarUpload"
                  :on-success="uploadbacksfidUrl"
                  :limit="limitCount"
                  :on-change="isOverLimitSfBack"
                  :on-remove="isRemoveLimitSfBack"
                  :class="{hide:hideUploadSfBack}"
                  :file-list="formData.sfImage.back"
                >
                  <div slot="tip" class="ele-tip">身份证反面</div>
                  <i class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
            </el-col>
          </el-form-item>
        </div>
        <el-form-item>
          <el-row :gutter="24">
            <el-col
              :span="18"
            ><el-button
               v-if="!isDetail"
               type="primary"
               class="ele-submit"
               @click="submitForm"
             >提交审核</el-button>
              <el-button
                class="ele-submit"
                @click="$router.push({ name: 'ShopManager' })"
              >返回首页</el-button></el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uploadPath } from '@/api/upload'
import { createShop } from '@/api/shop'
import { getToken } from '@/utils/auth'
import { getVerCode } from '@/api/auth'
import validate from '@/utils/formValidate'
import { Loading } from 'element-ui'
import CitySelect from '@/components/CitySelect'
/** 添加店铺 */
export default {
  name: 'AddShop',
  components: { CitySelect },
  data() {
    var valiIcon = (rule, value, callback) => {
      if (this.formData.yyzz && this.formData.yyzz.length === 0) {
        console.log(rule)
        callback()
      }

      /* if (!this.serviceImg) {
        callback(new Error('请上传服务图片'))
      } else {
        callback()
      }*/
    }
    return {
      loginUser: null,
      isDetail: false,
      edit: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      id: null,
      uploadPath,
      path: '/image',
      formData: {
        allCity: true,
        admin: '',
        phone: '',
        verCode: '',
        shopName: '',
        eshop: '1',
        address: {
          province: null,
          city: null,
          village: null,
          addressDetail: null
        },
        frSFImage: {
          font: [],
          back: []
        },
        sfImage: {
          font: [],
          back: []
        },
        gname: '',
        sid: '',
        SFid: '',
        sfid: '',
        yyzz: [],
        ylqxba: []
      },
      /** 倒计时*/
      show: true,
      count: '',
      timer: null,
      /** 上传限制*/
      limitCount: 1,
      hideUploadyyzz: false,
      hideUploadylqxba: false,
      hideUploadFrFont: false,
      hideUploadFrBack: false,
      hideUploadSfFont: false,
      hideUploadSfBack: false,
      props: { multiple: true },
      rules: {
        admin: [
          { required: true, message: '请输入店铺管理员', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          { required: true, validator: validate.validatePhone }
        ],
        verCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        Eshop: [
          { type: 'array', required: true, message: '请输入店铺类型', trigger: 'blur' }
        ],
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请选择省市区', trigger: ['change', 'blur'] }
        ],
        gname: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        sid: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
        SFid: [
          { required: true, message: '请输入法人身份证号', trigger: 'blur' }
        ],
        sfid: [
          { required: true, message: '请输入个人身份证号', trigger: 'blur' }
        ],
        yyzz: [
          { required: true, message: '请上传营业执照' }
        ],
        ylqxba: [
          { required: true, validator: valiIcon }
        ],
        FDSFid: [
          { required: true, message: '请输入店铺管理员', trigger: 'blur' }
        ],
        SFImage: [
          { required: true, validator: valiIcon }
        ]
      }
    }
  },
  computed: {
    /* 请求头部信息*/
    headers() {
      return {
        'X-Litemall-Admin-Token': getToken()
      }
    }
    /* 获取用户id*/
    /* ...mapGetters({

    })*/
  },

  created() {
    this.init()
    this.loginUser = this.$dd(localStorage.getItem('login-user')).loginUser
  },
  mounted() {
    const loadingInstance = Loading.service({ fullscreen: true })
    loadingInstance.close()
  },
  methods: {
    logout() {
      const vm = this
      vm.$confirm('确认退出登录吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$store.dispatch('LogOut').then(() => {
          vm.$router.push(`/LoginPage?redirect=${vm.$route.fullPath}`)
        })
      }).catch(() => {})
    },
    init: function() {
      const params = this.$dd(this.$route.query.p)

      if (!params.edit && !params.detail) {
        return
      } else if (params.edit) {
        this.edit = params.edit
        this.id = params.data.id
        this.formData.admin = params.data.concat
        this.formData.phone = params.data.phone
        this.formData.eshop = params.data.type.toString()
        this.formData.sfid = params.data.personCard

        this.formData.address.addressDetail = params.data.address
        this.formData.sfImage.font = [{ name: 'personPositiveCard', url: this.$parseImgUrl(params.data.personPositiveCard), imgUrl: params.data.personPositiveCard }]
        this.hideUploadSfFont = this.formData.sfImage.font.length >= this.limitCount
        this.formData.sfImage.back = [{ name: 'personBackCard', url: this.$parseImgUrl(params.data.personBackCard), imgUrl: params.data.personBackCard }]
        this.hideUploadSfBack = this.formData.sfImage.back.length >= this.limitCount
        this.formData.shopName = params.data.busiName
        this.$nextTick(() => {
          console.log(this.$refs.citySelect)
          this.$refs.citySelect.setAddress(params.data.province, params.data.city, params.data.village)
        })

        this.formData.gname = params.data.companyName
        this.formData.sid = params.data.taxpayerNumber
        this.formData.SFid = params.data.legalPersonCardNumber
        this.formData.yyzz = [{ name: 'businessLicense', url: this.$parseImgUrl(params.data.businessLicense), imgUrl: params.data.businessLicense }]
        this.hideUploadyyzz = this.formData.yyzz.length >= this.limitCount
        this.formData.ylqxba = [{ name: 'filingLicense', url: this.$parseImgUrl(params.data.filingLicense), imgUrl: params.data.filingLicense }]
        this.hideUploadylqxba = this.formData.ylqxba.length >= this.limitCount
        this.formData.frSFImage.font = [{ name: 'legalPersonPositiveCard', url: this.$parseImgUrl(params.data.legalPersonPositiveCard), imgUrl: params.data.legalPersonPositiveCard }]
        this.hideUploadFrFont = this.formData.frSFImage.font.length >= this.limitCount
        this.formData.frSFImage.back = [{ name: 'legalPersonBackCard', url: this.$parseImgUrl(params.data.legalPersonBackCard), imgUrl: params.data.legalPersonBackCard }]
        this.hideUploadFrBack = this.formData.frSFImage.back.length >= this.limitCount
      } else if (params.detail) {
        this.isDetail = params.detail
        this.id = params.data.id
        this.formData.admin = params.data.concat
        this.formData.phone = params.data.phone
        this.formData.eshop = params.data.type.toString()
        this.formData.sfid = params.data.personCard

        this.formData.address.addressDetail = params.data.address
        this.formData.sfImage.font = [{ name: 'personPositiveCard', url: this.$parseImgUrl(params.data.personPositiveCard), imgUrl: params.data.personPositiveCard }]
        this.hideUploadSfFont = this.formData.sfImage.font.length >= this.limitCount
        this.formData.sfImage.back = [{ name: 'personBackCard', url: this.$parseImgUrl(params.data.personBackCard), imgUrl: params.data.personBackCard }]
        this.hideUploadSfBack = this.formData.sfImage.back.length >= this.limitCount
        this.formData.shopName = params.data.busiName
        this.$nextTick(() => {
          console.log(this.$refs.citySelect)
          this.$refs.citySelect.setAddress(params.data.province, params.data.city, params.data.village)
        })

        this.formData.gname = params.data.companyName
        this.formData.sid = params.data.taxpayerNumber
        this.formData.SFid = params.data.legalPersonCardNumber
        this.formData.yyzz = [{ name: 'businessLicense', url: this.$parseImgUrl(params.data.businessLicense), imgUrl: params.data.businessLicense }]
        this.hideUploadyyzz = this.formData.yyzz.length >= this.limitCount
        this.formData.ylqxba = [{ name: 'filingLicense', url: this.$parseImgUrl(params.data.filingLicense), imgUrl: params.data.filingLicense }]
        this.hideUploadylqxba = this.formData.ylqxba.length >= this.limitCount
        this.formData.frSFImage.font = [{ name: 'legalPersonPositiveCard', url: this.$parseImgUrl(params.data.legalPersonPositiveCard), imgUrl: params.data.legalPersonPositiveCard }]
        this.hideUploadFrFont = this.formData.frSFImage.font.length >= this.limitCount
        this.formData.frSFImage.back = [{ name: 'legalPersonBackCard', url: this.$parseImgUrl(params.data.legalPersonBackCard), imgUrl: params.data.legalPersonBackCard }]
        this.hideUploadFrBack = this.formData.frSFImage.back.length >= this.limitCount
      }
    },
    changedAddress() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.formData.allCity = false
      } else {
        vm.formData.allCity = true
      }
    },
    /** 获取验证码*/
    getVerCodeByVoice() {
      if (this.formData.phone) {
        getVerCode(this.formData.phone, 1, 1).then(response => {
          console.log(response.data)
        })
      } else {
        return this.$message.error('请先填写手机号码！')
      }
    },
    getVerCodeByMessage() {
      if (this.formData.phone) {
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        getVerCode(this.formData.phone, 1, 0).then(response => {
          console.log(response.data)
          this.formData.verCode = ''
        })
      } else {
        return this.$message.error('请先填写手机号码！')
      }
    },
    // 图片大小限制
    beforeAvatarUpload: function(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },

    // 营业执照路径
    uploadyyzzUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.yyzz.push(file)
      console.log(this.formData.yyzz)
    },
    // 医疗器械路径
    uploadylqxUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.ylqxba.push(file)
    },
    // 法人身份证正面路径
    uploadfontfrsfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.frSFImage.font.push(file)
    },
    // 法人身份证反面路径
    uploadbackfrsfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.frSFImage.back.push(file)
    },
    // 身份证正面路径
    uploadfontsfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.sfImage.font.push(file)
    },
    // 身份证反面路径
    uploadbacksfidUrl(response, file) {
      file.imgUrl = response.data.relativePath
      this.formData.sfImage.back.push(file)
    },

    handleRemove(file) {
      console.log(file)
    },
    /** 图片限制判断*/
    isOverLimityyzz(file, fileList) {
      this.hideUploadyyzz = fileList.length >= this.limitCount
    },
    isOverLimitylqxba(file, fileList) {
      this.hideUploadylqxba = fileList.length >= this.limitCount
    },
    isOverLimitFrFont(file, fileList) {
      this.hideUploadFrFont = fileList.length >= this.limitCount
    },
    isOverLimitFrBack(file, fileList) {
      this.hideUploadFrBack = fileList.length >= this.limitCount
    },
    isOverLimitSfFont(file, fileList) {
      this.hideUploadSfFont = fileList.length >= this.limitCount
    },
    isOverLimitSfBack(file, fileList) {
      this.hideUploadSfBack = fileList.length >= this.limitCount
    },
    isRemoveLimityyzz(file, fileList) {
      this.hideUploadyyzz = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.yyzz, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.yyzz.splice(index, 1)
      }
    },
    isRemoveLimitylqxba(file, fileList) {
      this.hideUploadylqxba = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.ylqxba, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.ylqxba.splice(index, 1)
      }
    },
    isRemoveLimitFrFont(file, fileList) {
      this.hideUploadFrFont = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.frSFImage.font, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.frSFImage.font.splice(index, 1)
      }
    },
    isRemoveLimitFrBack(file, fileList) {
      this.hideUploadFrBack = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.frSFImage.back, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.frSFImage.back.splice(index, 1)
      }
    },
    isRemoveLimitSfFont(file, fileList) {
      this.hideUploadSfFont = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.sfImage.font, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.sfImage.font.splice(index, 1)
      }
    },
    isRemoveLimitSfBack(file, fileList) {
      this.hideUploadSfBack = fileList.length >= this.limitCount
      const index = this.$XEUtils.findIndexOf(this.formData.sfImage.back, item => item.uid === file.uid)
      if (index >= 0) {
        this.formData.sfImage.back.splice(index, 1)
      }
    },
    // 提交
    submitForm() {
      // 校验

      if (!this.formData.admin) {
        return this.$message.error('店铺管理员不能为空')
      }
      if (!this.formData.phone) {
        return this.$message({ type: 'error', message: '店铺联系电话不能为空' })
      }
      if (!this.formData.verCode) {
        return this.$message({ type: 'error', message: '验证码不能为空' })
      }
      if (!this.formData.eshop) {
        return this.$message({ type: 'error', message: '请选择店铺类型' })
      }
      if (!this.formData.shopName) {
        return this.$message({ type: 'error', message: '店铺名称不能为空' })
      }
      if (!this.formData.address.province) {
        return this.$message({ type: 'error', message: '省份不能为空' })
      }
      if (!this.formData.address.city) {
        return this.$message({ type: 'error', message: '城市不能为空' })
      }
      if (!this.formData.address.village) {
        return this.$message({ type: 'error', message: '区不能为空' })
      }
      if (!this.formData.address.addressDetail) {
        return this.$message({ type: 'error', message: '详细地址不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.gname) {
        return this.$message({ type: 'error', message: '公司名称不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.sid) {
        return this.$message({ type: 'error', message: '纳税人识别号不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.SFid) {
        return this.$message({ type: 'error', message: '法人身份证号不能为空' })
      }
      if (this.formData.eshop === '1' && !this.formData.sfid) {
        return this.$message({ type: 'error', message: '个人身份证号不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.yyzz) {
        return this.$message({ type: 'error', message: '营业执照不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.ylqxba) {
        return this.$message({ type: 'error', message: '医疗器械备案许可证不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.frSFImage.font) {
        return this.$message({ type: 'error', message: '法人身份证正面不能为空' })
      }
      if (this.formData.eshop === '0' && !this.formData.frSFImage.back) {
        return this.$message({ type: 'error', message: '法人身份证反面不能为空' })
      }
      if (this.formData.eshop === '1' && !this.formData.sfImage.back) {
        return this.$message({ type: 'error', message: '身份证反面不能为空' })
      }
      if (this.formData.eshop === '1' && !this.formData.sfImage.font) {
        return this.$message({ type: 'error', message: '身份证正面不能为空' })
      }
      const sfId = this.formData.eshop === '1' ? this.formData.sfid : this.formData.SFid
      const form = {
        id: this.id,
        admin: this.formData.admin,
        phone: this.formData.phone,
        verCode: this.formData.verCode,
        eshop: this.formData.eshop,
        shopName: this.formData.shopName,
        shopAddress: {
          shengId: this.formData.address.province.code,
          sheng: this.formData.address.province.name,
          shiId: this.formData.address.city.code,
          shi: this.formData.address.city.name,
          quId: this.formData.address.village.code,
          qu: this.formData.address.village.name,
          addressDetail: this.formData.address.addressDetail
        },
        gname: this.formData.gname,
        sid: this.formData.sid,
        sfid: sfId,
        yyzz: this.formData.yyzz.length > 0 ? this.formData.yyzz[0].imgUrl : null,
        ylqxba: this.formData.ylqxba.length > 0 ? this.formData.ylqxba[0].imgUrl : null,
        sfImage: {
          font: this.formData.sfImage.font.length > 0 ? this.formData.sfImage.font[0].imgUrl : null,
          back: this.formData.sfImage.back.length > 0 ? this.formData.sfImage.back[0].imgUrl : null
        },
        frSFImage: {
          font: this.formData.frSFImage.font.length > 0 ? this.formData.frSFImage.font[0].imgUrl : null,
          back: this.formData.frSFImage.back.length > 0 ? this.formData.frSFImage.back[0].imgUrl : null
        }
      }
      console.log(form)
      const loadingInstance = Loading.service({ fullscreen: true })
      createShop(form).then(response => {
        loadingInstance.close()
        this.$message({ type: 'success', message: '店铺添加成功' })
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }).catch(res => {
        loadingInstance.close()
        if (res && res.data && res.data.errno !== 0) {
          this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.ele-addshop {
  .navbar {
    z-index: 100;
    width: 100%;
    background: #1890ff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    position: fixed;
    top: 0;

    .topbar {
      padding: 0 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 1200px;

      .title {
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
      }

      .infos {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        .account {
          font-size: 14px;
          color: #ffffff;
        }
      }

    }
  }

  .page-body {
    margin: 0 auto;
    padding-top: 64px;
    width: 1024px;
  }

  .shop-title {
    margin-top: 20px;
    width: 100%;
    height: 50px;
    background: #f3f3f3;
    line-height: 50px;
    font-weight: bold;
    padding: 0px 20px;
  }
  .ele-form {
    margin-top: 20px;
    ::v-deep.el-form-item__label {
      width: 200px;
      text-align: start;
    }
    .ele-col-upload {
      position: relative;
    }
    .ele-select-eshop {
      width: 100%;
    }
    .ele-select-address {
      margin-left: 20px;
    }
    .add-Eshop {
      .el-upload-1 {
        display: flex;
        .picture-card-item-2 {
          margin-left: 40px;
        }
      }
    }
    .ele-introduce {
      font-size: 14px;
      color: gray;
    }
    .add-Ushop {
      .el-upload-1 {
        display: flex;
        .picture-card-item-2 {
          margin-left: 40px;
        }
      }
    }
    .ele-submit {
      width: 200px;
      height: 50px;
      margin: 50px 0px;
    }
    .add-Eshop,.add-Ushop{
      .audit-off {
        .ele-col-item {
          position: relative;
          .upload-demo {
            position: absolute;
            z-index: 1000;
            top: -50px;
            left: -25px;
            transform: translateY(60px) translateX(49%);
            ::v-deep.el-upload--picture-card {
              background: none;
              border: none;
            }
            .up-btn-load {
              width: 120px;
            }
            .el-upload-list {
              position: absolute;
              left: 0;
            }
          }
          .ele-introduce {
            margin: 0;
            white-space: nowrap;
            font-size: 14px;
            color: gray;
          }
        }
      }
      ::v-deep.el-image {
        .el-image__inner {
          width: 240px;
        }
      }
    }

    ::v-deep .hide .el-upload--picture-card {
      display: none !important;
    }
  }

}
</style>
